<template>
  <view class="mainPage">
    <view class="header">
      <view class="text-left padding text-xl text-black to-back" @click="toBack">
        <text class="cuIcon-close text-bold"></text>
      </view>
    </view>
    <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 200rpx">
      <image style="width: 200rpx;height: 200rpx" src="/static/logo.png"></image>
      <text class="text-bold" style="font-size: 32rpx">指花到家</text>
    </div>
    <button  style="border: none;width: 80%;margin: 100rpx auto" class="btnSubmit china-btn-bg" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">授权微信手机号登录</button>

    <view class="footer">
      <view class="check" style="display: flex;align-items: center">
        <div style="display: flex;align-items: center" @click="setAgree()">
          <text :class="agree?'cuIcon-roundcheckfill themeColor':'cuIcon-roundcheck'"></text>
          <text>我已阅读并同意</text>
        </div>
        <text style="color: #cbbb4"  @click="setAgree2()">《用户协议》</text>
      </view>
    </view>
  </view>
</template>

<script>
import SmsLogin from './modules/sms_login.vue'; // 验证码登录
import Footer from './modules/footer.vue'; // 用户协议
export default {
  components: {SmsLogin,Footer},
  data() {
    return {
      agree:false,
      policy: {}
    }
  },
  onLoad() {
    uni.showLoading()
    this.$http.policyList().then(res => {
      this.policy = res[0]
    })
  },
  methods: {
    onGetPhoneNumber (e) {
      if (!this.agree) {
        uni.showToast({
          title: '请先阅读并同意用户协议',
          icon: 'none'
        })
        return
      }
      if(e.detail.errMsg === 'getPhoneNumber:ok') {
        uni.showLoading({
          title: '登录中...'
        })
        let that = this
        const { detail: { encryptedData, iv, code } } = e;
        wx.login({
          async success(loginRes) {
            if (loginRes.code) {
              try {
                // 发送code、encryptedData、iv到后端
                const response = await that.$http.wxlogin({
                  code: loginRes.code,
                  encryptedData,
                  iv,
                });
                uni.showToast({
                  title: '登录成功',
                  icon: 'success'
                })
                uni.setStorageSync('userInfo',response);
                // 如果上一页有页面，就返回上一页
                let pages = getCurrentPages();
                if (pages.length > 1) {
                  uni.navigateBack()
                } else {
                  uni.reLaunch({
                    url: '/pages/index/index'
                  })
                }
              } catch (error) {
                uni.showToast({
                  title: error,
                  icon: 'none'
                })
                console.error('请求后端接口失败:', error);
              }
            }
          }
        })
      }
    },

    toBack(){
      uni.navigateBack()
    },
    setAgree(){
      this.agree =! this.agree;
    },
    setAgree2() {
      uni.navigateTo({
        url: '/pages/policy/policy?id=' + this.policy.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.footer {
  position: absolute;
  bottom: 60rpx;
  width: 100%;
  font-size: 26rpx;
  color: #999;
  display: flex;
  justify-content: center;
}

.header {
  background-size: cover;
  position: relative;
  text-align: center;
  margin-top: -150upx;
  image {
    height: 160rpx;
    width: 160rpx;
    margin-top: 170rpx;
    border-radius: 30rpx;
  }
  .to-back{
    padding-top: 170rpx;
  }
}
.webname{
  font-size: 35upx;
}
</style>
